<template>
	<view class='detailspackage'>
		<image :src='detil[0].imageUrl[1]'></image>
		<view class='detailspackage-text'>
			<p class='pack'>{{detil[0].name}}</p>
			<p class='institution'>{{detil[0].subOrganName}}</p>
			<text class='money'>￥{{detil[0].currentPrice}}
				<text class='money1'>￥{{detil[0].originalPrice}}</text>
				<text class='volume'>销量
					<text class='volume1'>132</text>
				</text>
			</text>
		</view>
	</view>
	<!-- <view>
		<uni-icons type="contact" size="30"></uni-icons>
	</view> -->
	<view class='tabs'>
		<view class="btn">
			<button @click="images(1)" class='image' plain='true' :class="{'checked':tab===1}">图文详情</button>
			<button @click='pro(2)' class='pro' plain='true' :class="{'checked':tab===2}">体检项目</button>
		</view>
		<view class="images" v-show="tab===1">
			<text>套餐介绍</text>
			<text>{{detil[0].packageIntroduction}}</text>
			<image :src='detil[0].imageUrl[1]'></image>
			<image :src='detil[0].imageUrl[0]'></image>
			<p class='p1'>使用规则</p>
			<text>{{detil[0].packageRole}}</text>
		</view>
		<view class="pro" v-show="tab===2">
			<view class="pros">
				<view class="pros-1" v-for='exmin1 in exmins'>
					<text class='text'>项目名称
						<text>{{exmin1.itemName}}</text>
					</text>
					<text  class='text'>检查范围
						<text>{{exmin1.examinationScope}}</text>
					</text>
					<text  class='text'>检查意义
						<text>{{exmin1.examinationMeaning}}</text>
					</text>
				</view>
			</view>
		</view>
	</view>
	<view class="organ">
		<text class='text1'>适用机构</text>
		<view class="organs">
			<view class="organs-1" v-for='orgen1 in organs' @click='organ(orgen1.subOrganId)'>
				<image :src='orgen1.imgUrl'></image>
				<text class='text2'>{{orgen1.subOrganName}}</text>
				<text class='text3'>{{orgen1.registNum?orgen1.registNum:0}}
					<text>人预约</text>
				</text>
				<text class='text4'>
					约<text>4.5</text>km
				</text>
			</view>
		</view>
	</view>
	<view class='buy'>
		<text class='text1'>￥
		<text>1000</text>
		</text>
		<view class='btnbuy' @click='item(id)'>预约购买</view>
	</view>

</template>

<script lang="ts" setup>
	import { reactive, ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	let detil=reactive([])
	let organs=reactive([])
	let exmins=reactive([])
	let id=ref()
	onLoad((opion)=>{
		id.value=opion.id
		const packages=(id)=>{
			uni.request({
				url:'http://172.16.129.235:8080/patient/pack/findPackageById?packageId='+id,
				success:function(res){
					detil.length=0
					detil.push(res.data.data)	
					// console.log(detil);
				}
			})
		}
		packages(opion.id)
		const organ=(id:number)=>{
			uni.request({
				url:'http://172.16.129.235:8080/patient/PatientExaminationOrgan/findSubOrganByPackageId?packageId='+id,
				success:function(res){
					organs.length=0
					organs.push(...res.data.data)
				}
			})
		}
		organ(opion.id)
		const exmin =(id)=>{
			uni.request({
				url:'http://172.16.129.235:8080/patient/ite/findItemsBypackageId?packageId='+id,
				success:function(res){
					exmins.length=0
					exmins.push(...res.data.data)
				}
			})
		}
		exmin(opion.id)
	})
	
	
	let tab = ref(1)
	const images = (image : number) => {
		tab.value = image
	}
	const pro = (pro : number) => {
		tab.value = pro
	}
	const item=(id)=>{
		uni.navigateTo({
			url:'/page_checkup/checkup_additem/checkup_additem?id='+id
		})
	}
	const organ=(id)=>{
		uni.navigateTo({
			url:''+id
		})
	}
</script>

<style lang="less">
	page {
		background-color: #f3f3f3;
	}

	.detailspackage {
		width: 740rpx;
		height: 600rpx;
		background-color: #fff;
		margin: auto;

		image {
			width: 680rpx;
			height: 380rpx;
			margin-left: 30rpx;
		}

		.detailspackage-text {
			margin-top: 15rpx;
			margin-left: 30rpx;

			.pack {
				font-size: 45rpx;
			}

			.institution {
				font-size: 30rpx;
				color: rgba(00, 00, 00, 0.5);
				margin-top: 20rpx;
				width: 380rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.money {
				font-size: 28rpx;
				display: inline-block;
				margin-top: 20rpx;

				.money1 {
					font-size: 26rpx;
					color: rgba(00, 00, 00, 0.5);
					text-decoration: line-through;
				}

				.volume {
					color: rgba(00, 00, 00, 0.5);
					margin-left: 400rpx;
				}
			}
		}
	}

	.tabs {
		width: 740rpx;
		margin: auto;
		margin-top: 20rpx;
		background-color: #fff;

		.btn {
			display: flex;

			.image {
				width: 340rpx;
				height: 80rpx;
				outline: none;
				background-color: transparent;
				cursor: pointer;
				border-radius: 0;
				border: none;
				border-bottom: 2rpx solid #d7d7d7;
			}

			.pro {
				width: 340rpx;
				height: 80rpx;
				outline: none;
				background-color: transparent;
				cursor: pointer;
				border-radius: 0;
				border: none;
				border-bottom: 2rpx solid #d7d7d7;
			}

			.checked {
				border-bottom: 4rpx solid #349d00;
				color: #349d00;
			}
		}

		.images {
			width: 720rpx;
			margin: auto;

			text {
				display: inline-block;
				margin-left: 20rpx;
				margin-top: 20rpx;
			}

			.p1 {
				margin-left: 20rpx;
				margin-top: 20rpx;
			}

			image {
				width: 680rpx;
				height: 380rpx;
				margin-left: 20rpx;
				margin-top: 20rpx;
			}

			.text1 {
				margin-bottom: 40rpx;
			}
		}
		.pro{
			.pros{
				margin-top: 30rpx;
				.pros-1{
					width: 720rpx;
					height: 210rpx;
					background-color: #eee;
					margin: auto;
					border-radius: 12rpx;
					margin-bottom: 30rpx;
					.text{
						display: block;
						box-sizing: border-box;
						padding-top: 20rpx;
						margin-left: 20rpx;
						text{
							margin-left: 60rpx;
						}
					}
				}
			}
		}
	}

	.organ {
		width: 740rpx;
		margin: auto;
		margin-top: 20rpx;
		background-color: #fff;

		.text1 {
			display: inline-block;
			font-size: 36rpx;
			margin-left: 20rpx;
			margin-top: 20rpx;
		}

		.organs {
			width: 720rpx;
			margin: auto;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.organs-1 {
				width: 340rpx;
				height: 450rpx;
				background-color: #eee;
				margin-top: 30rpx;
				border-radius: 12rpx;
				margin-bottom: 30rpx;

				image {
					width: 340rpx;
					height: 280rpx;
				}

				.text2 {
					display: block;
					margin-left: 10rpx;
				}
				.text3{
					display: inline-block;
					margin-top: 20rpx;
					margin-left: 10rpx;
					font-size: 28rpx;
					text{
						color: #bbbbbb;
						margin-left: 0;
					}
				}
				.text4{
					color: #bbbbbb;
					font-size: 28rpx;
					margin-left: 40rpx;
				}
			}
		}
	}
	.buy{
		line-height: 100rpx;
		.text1{
			display: inline-block;
			width: 375rpx;
			height: 100rpx;
			border-top: 1rpx solid #349d00;
			text-align: center;
			font-weight: bold;
			color: #349d00;
		}
		.btnbuy{
			display: inline-block;
			width: 375rpx;
			height: 100rpx;
			text-align: center;
			background-color: #349d00;
			color: #fff;
		}
	}
</style>